<template>
  <div class="player">
    <!-- 全屏播放器 -->
    <div class="big-player" v-show="isFullPlay" v-if="songMes && Object.keys(songMes).length">
      <div class="container">
        <!-- :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'contain',backgroundRepeat: 'no-repeat',backgroundSize: '1000% 1000%', backgroundPosition:'center center' }" -->
        <img :src="coverImgUrl||baseImg" alt class="background" />
        <div class="header-song space-between">
          <div class="back" @click="goBack">
            <img :src="back" alt class="back" />
          </div>
          <!-- <div class="song-mes-tit center" > -->
          <p class="title color-f fs-36">{{songMes.music_name}}</p>
          <!-- <p class="txt" v-if="!isShowImg">{{songMes.singer_artistic_name}}</p> -->
          <!-- </div> -->
          <img :src="share" alt class="share" @click="toShareMusic" />
        </div>
        <!-- 展示歌手图片 -->
        <div class="main" v-if="isShowImg">
          <div class="song-pic center" @click="lookWords">
            <img :src="songMes.background" alt :class="isPlay?'square':''" />
          </div>
          <div class="song-mes">
            <p class="title color-f fs-36">{{playingLyric}}</p>
            <p class="txt color-f">
              <!-- 的如何发挥 -->
              {{songMes.singer_artistic_name}}
            </p>
          </div>
        </div>
        <!-- 展示歌词详情的 -->
        <!-- @touchstart.prevent="middleTouchStart" @touchmove.prevent="middleTouchMove" @touchend="middleTouchEnd" -->
        <div class="middle" v-else @click="lookSingerImg">
          <!--歌词滚动-->
          <scroll class="middle-r" ref="lyriclist" :data="currentLyric && currentLyric.lines">
            <div class="lyric-wrapper">
              <div v-if="currentLyric">
                <p
                  ref="lyricLine"
                  class="text"
                  v-for="(line, index) in currentLyric.lines"
                  :key="line.key"
                  :class="{'current': currentLineNum === index}"
                >{{line.txt}}</p>
              </div>
            </div>
          </scroll>
        </div>
        <!-- <audio :src="songMes.music_url" ref="player" id="music" :loop="isloop"></audio> -->
        <!-- http://the-store-bucket.oss-cn-shanghai.aliyuncs.com/起风了-吴青峰.mp3 -->
        <audio :src="songMes.music_url" ref="player" id="music" :loop="isloop"></audio>
        <div class="icons space-between" v-if="isShowImg">
          <img :src="loved" v-if="songMes.is_favourite == 1" alt @click.stop="changeLove()" />
          <img :src="love" v-else alt @click.stop="changeLove()" />
          <img :src="comment" alt @click="toComment" />
          <div>
            <img :src="downLoad" alt />
            <img v-show="isPayment" class="vip" :src="vip" />
          </div>
          <img :src="more" alt @click.stop="toShowModel()" />
        </div>
        <div class="bottom">
          <div class="progress space-between">
            <!-- <div class="progress-light"  v-bind:style="{ width:this.audioRange}"></div> -->
            <span class="left">{{playTime}}</span>
            <div class="progress-bar-wrapper">
              <progress-bar :currentTime="currentTime" :alltime="allTimes" @fn="getpercent"></progress-bar>
            </div>

            <span class="right">{{allTime}}</span>
          </div>
          <div class="playbtn space-between">
            <img :src="shunxu" alt @click.stop="tochecktype" v-if="ind==1" />
            <img :src="suiji" alt @click.stop="tochecktype" v-if="ind==2" />
            <img :src="loop" alt @click.stop="tochecktype" v-if="ind==3" />
            <img :src="playLeft" alt @click="previous()" />
            <img v-if="!isPlay" :src="playMusic" @click="play" alt />
            <img v-else :src="noplayMusic" @click="play" alt />
            <!-- <img v-else @click="play" alt=""> -->
            <img :src="playRight" alt @click="next()" />
            <img :src="musicList" alt @click="showPlayList()" />
          </div>
        </div>
      </div>
    </div>
    <!-- <audio :src="musicurl" :loop="isloop" ref="player" id="music"></audio> -->
    <div class="min-player" v-if="songMes && Object.keys(songMes).length" v-show="!isFullPlay">
      <playSlip
        v-bind:isSpecial="this.isSpecial"
        :isPlay="isPlay"
        @fn="getPlayStatus"
        @fn1="getPlayingListStatus"
        :isFull="isFull"
        :songMes="songMes"
        v-if="songMes"
      ></playSlip>
    </div>
    <!-- 播放列表模态框 -->
    <div class="playList" v-show="isShowPlay" @click="closePlayModel()">
      <div class="playList-main">
        <div class="top">
          <div class="left">
            <div class="img">
              <img :src="listLoop" alt @click.stop="tochecktype" v-if="ind==1" />
              <img :src="suijiblack" alt @click.stop="tochecktype" v-if="ind==2" />
              <img :src="songLoop" alt @click.stop="tochecktype" v-if="ind==3" />
            </div>
            <div class="txt" v-if="ind==1">列表循环</div>
            <div class="txt" v-if="ind==2">随机播放</div>
            <div class="txt" v-if="ind==3">单曲循环</div>
            <div class="num">({{playingListNum}})</div>
          </div>
          <div class="right">
            <div class="add" @click.stop="toShowSongSheetModel(1)">
              <img :src="collectblack" alt />
            </div>
            <div class="collect">收藏全部</div>&nbsp;&nbsp;|
            <div class="del">
              <img :src="delList" alt @click.stop="clearMusicList()" />
            </div>
          </div>
        </div>
        <div class="songList">
          <div class="list">
            <div
              class="item"
              v-for="(item,index) in playingList"
              :key="index"
              @click.stop="checkMusic(item.music_id)"
            >
              <div class="left" :class="{isPlaying:item.music_id == music_id}">
                <div
                  class="songName fs-32"
                  :class="{isPlaying:item.music_id == music_id}"
                >{{item.music_name}}</div>&nbsp;-&nbsp;
                <div
                  class="singerName fs-26"
                  :class="{isPlaying:item.music_id == music_id}"
                >{{item.singer_artistic_name || item.singer_name}}</div>
              </div>
              <div class="right">
                <img :src="close" alt @click.stop="deleteMusic(item.music_id)" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 收藏到歌单模态框 -->
    <div
      class="collectModel"
      @touchmove.prevent
      @click.stop="closeCollectModel"
      v-show="isShowCollect"
    >
      <div class="add-box">
        <div class="add">
          <div class="img" @click.stop="addSheet">
            <img :src="add" alt />
          </div>
          <span class="text">新建歌单</span>
        </div>
        <div class="list">
          <div
            class="list-item"
            v-for="(item,index) in list"
            :key="index"
            @click="chooseSheet(item.song_sheet_id)"
          >
            <div class="center-col">
              <div class="left center-col">
                <img :src="item.song_sheet_photo" alt />
              </div>

              <div class="right flex-column">
                <p>{{item.song_sheet_name}}</p>
                <p class="color-9">{{item.music_num}}首</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新建歌单 -->
    <div class="addmusic-list" @touchmove.prevent v-if="addshow">
      <div class="contents bg-f">
        <div class="top padding-24 space-between">
          <p class="fs-32 color-6" @click="cancel">取消</p>
          <p class="fs-32">新建歌单</p>
          <p class="fs-32 color-6" @click="sure">确定</p>
        </div>
        <div class="setmusic padding-24">
          <input type="text" placeholder="歌单名称" class="fs-32 color-6" v-model="songname" />
          <div class="center-col">
            <div class="yuan center bg-f" :class="{active:ac}" @click="checkStatus">
              <p></p>
            </div>
            <p class="fs-32 color-6">设置为隐私歌单</p>
          </div>
        </div>
      </div>
    </div>
    <div class="clearModel" @touchmove.prevent @click.stop="closeClearModel" v-show="isShowClear">
      <div class="add-box">
        <div class="title fs-32">您确定要清除当前播放列表吗?</div>
        <div class="btn">
          <div class="left fs-32" @click.stop="closeClearModel">取消</div>
          <div class="right fs-32" @click="sureClear">确定</div>
        </div>
      </div>
    </div>
    <songMore :showSongMore="showSongMore" :musicObject="musicObject" @fn="getSongMoreStatus"></songMore>
    <shareModel v-show="leaderModal" @fn="getShareModel" :leaderModal="leaderModal"></shareModel>
  </div>
</template>
<script>
import playSlip from "./play-slip";
import Lyric from "lyric-parser";
import { mapGetters } from "vuex";
import { MessageBox } from "mint-ui";
export default {
  inject: ["reload"],
  data() {
    return {
      leaderModal: false, //控制微信内分享模态框
      store: this.getStore(),
      isShowClear: false, //是否显示清除播放列表模态框
      isFullPlay: false, // 表示当前是否是全屏显示播放
      isShowPlay: false, //是否显示播放列表模态框
      isloop: false,
      musicurl: "",
      isShowImg: true,
      isPayment: false,
      isPlay: false,
      played: false,
      title: "歌曲详情",
      isloop: false,
      checktype: false,
      type: 1,
      currentLyric: null,
      currentLineNum: 0,
      playingLyric: "歌词",
      line: {},
      coverImgUrl: "",
      baseImg: require("@/assets/account/singerbg.png"),
      back: require("@/assets/index/back.png"),
      share: require("@/assets/index/musicshare.png"),
      //songPic:require('@/assets/index/song-pic.png'),
      love: require("@/assets/index/sc.png"),
      loved: require("@/assets/index/red-heart.png"),
      comment: require("@/assets/index/chatmusic.png"),
      downLoad: require("@/assets/index/down.png"),
      more: require("@/assets/index/moremusic.png"),
      loop: require("@/assets/index/loop.png"),
      shunxu: require("@/assets/index/shunxu.png"),
      suiji: require("@/assets/index/suiji.png"),
      playLeft: require("@/assets/index/Prev.png"),
      playMusic: require("@/assets/index/Playmusic.png"),
      noplayMusic: require("@/assets/index/zanting.png"),
      //playPause:require('@/assets/index/Playmusic.png'),
      playRight: require("@/assets/index/Next.png"),
      musicList: require("@/assets/index/list.png"),
      vip: require("@/assets/index/vip.png"),
      songLoop: require("@/assets/index/songLoop.png"),
      listLoop: require("@/assets/index/listLoop.png"),
      suijiblack: require("@/assets/index/suijiblack.png"),
      collectblack: require("@/assets/index/collectblack.png"),
      delList: require("@/assets/index/delete.png"),
      close: require("@/assets/index/close.png"),
      add: require("@/assets/mine/add.png"),
      count: 180,
      timeNum: 0,
      flag: true,
      songList: [],
      playTime: "00:00",
      allTime: "00:00",
      audiourl:
        "http://the-store-bucket.oss-cn-shanghai.aliyuncs.com/逆态度-张杰.mp3",
      closeClock: false, //关掉定时器
      audioRange: 0, //音频进度条
      currentSrc: "img", //音频文件名
      currentTime: 0, //进度条当前播放的时间
      allTimes: 0,
      songMes: {},
      music_id: 1, //音乐id
      music_from: 1, //歌曲来自哪里
      song_sheet_id: 1, //歌单id
      duration: 11, //音乐总时长
      ind: 1,
      currentLyric: null, // 封装后的歌词对象
      currentLineNum: 0, // 当前下显示歌词行数
      playingLyric: "", // 当前cd页显示歌词
      musicMes: {}, //歌曲信息
      playingList: [
        //当前播放列表数据
        {
          id: 1,
          songName: "残酷月光",
          singerName: "林宥嘉"
        },
        {
          id: 2,
          songName: "残酷月光",
          singerName: "林宥嘉"
        },
        {
          id: 3,
          songName: "残酷月光",
          singerName: "林宥嘉"
        },
        {
          id: 4,
          songName: "残酷月光",
          singerName: "林宥嘉"
        },
        {
          id: 5,
          songName: "残酷月光",
          singerName: "林宥嘉"
        },
        {
          id: 6,
          songName: "残酷月光",
          singerName: "林宥嘉"
        },
        {
          id: 7,
          songName: "残酷月光",
          singerName: "林宥嘉"
        },
        {
          id: 8,
          songName: "残酷月光",
          singerName: "林宥嘉"
        },
        {
          id: 9,
          songName: "残酷月光",
          singerName: "林宥嘉"
        },
        {
          id: 10,
          songName: "残酷月光",
          singerName: "林宥嘉"
        },
        {
          id: 11,
          songName: "残酷月光",
          singerName: "林宥嘉"
        },
        {
          id: 12,
          songName: "残酷月光",
          singerName: "林宥嘉"
        }
      ], //当前播放列表
      playingListNum: null, //播放列表歌曲总数目
      list_category_name: "", //排行榜类型名称
      showSongMore: false, //展示歌曲更多模态框
      musicObject: {}, //音乐信息
      isShow: false, //歌曲更多模态框
      isShowCollect: false, //添加到歌单模态框
      addshow: false, //新增歌单
      list: [], //添加到歌单 模态框内歌单列表
      userinfo: "", //用户信息
      musicIdList: [], //选中的音乐id数组
      ac: false, //控制是否是隐私歌单的样式
      songname: "", //新增的歌单名称
      isCollectAll: false //是否收藏全部
    };
  },
  props: {
    isSpecial: Boolean,
    isFull: Boolean
  },
  computed: {
    // isFull: function() {
    //   console.log(this.store.isFullPlay)
    //   return this.store.isFullPlay;
    // }
    // musicMessage: function() {
    // this.isPlay = this.store.isPlay;
    // console.log( this.isPlay,'--- this.isPlay--mounted');
    // if (this.isPlay) {
    //   var audio = document.getElementById("music");
    //   audio.play();
    // }
    //   return this.store.musicMes;
    // }
  },
  watch: {
    isShowPlay: function(val) {
      if (val) {
        this.playingList = JSON.parse(
          window.localStorage.getItem("playingList")
        );
        this.playingListNum = this.playingList.length;
        setTimeout(() => {
          var audio = document.getElementById("music");
          if (this.isPlay) {
            audio.play();
            this.playControl();
            this.currentLyric.play();
          } else {
            audio.pause();
            this.currentLyric.stop();
          }
        }, 500);
      }
    },
    isPlay: function(val) {
      this.isPlay = this.store.isPlay;
      this.isFullPlay = this.store.isFullPlay;
      setTimeout(() => {
        var audio = document.getElementById("music");
        if (this.isPlay) {
          audio.play();
          this.playControl();
          this.currentLyric.play();
          // this.getWords();
        } else {
          audio.pause();
          this.currentLyric.stop();
        }
      }, 500);
    },
    isFull: function(val) {
      this.isFullPlay = this.store.isFullPlay;
      this.isPlay = this.store.isPlay;
      this.played = this.store.isPlay;
      this.music_id = this.store.musicMes.music_id;
      this.music_from = this.store.musicMes.music_from;
      this.song_sheet_id = this.store.musicMes.song_sheet_id;
      this.list_category_name = this.store.musicMes.list_category_name;
      this.playingList = JSON.parse(window.localStorage.getItem("playingList"));
      this.getSongMes();
    },
    musicMes: function(val) {
      // console.log(val, "---musicMes--val");
    },
    playingList: function(val) {}
    // musicMessage: function(val) {
    //   console.log(val, "---val");
    // }
  },
  components: {
    playSlip
  },
  created() {
    // music_from 1=歌曲单曲 2=专辑中的歌曲 3=歌单中的歌曲
    // music_from =3 的时候传一个歌单id song_sheet_id
    if (window.localStorage.getItem("ind") != null) {
      this.ind = window.localStorage.getItem("ind");
    }
    if (JSON.stringify(this.store.musicMes) == "{}") {
      this.store.musicMes = JSON.parse(window.localStorage.getItem("musicMes"));
    }
    if (JSON.stringify(this.store.songMes) == "{}") {
      this.songMes = JSON.parse(window.localStorage.getItem("songMes"));
      this.store.songMes = this.songMes;
    } else {
      // this.musicMessage = this.store.songMes;
    }
    if (!this.store.musicMes) {
      return;
    }
    this.playingList = JSON.parse(window.localStorage.getItem("playingList"));
    this.music_id = this.store.musicMes.music_id;
    this.music_from = this.store.musicMes.music_from;
    this.song_sheet_id = this.store.musicMes.song_sheet_id;
    this.list_category_name = this.store.musicMes.list_category_name;
    this.getSongMes();
    // this.getWords();
    this.cellect();
    //this.play()
    this.getUserInfo();
  },
  methods: {
    // 获取分享模态框传过来的status
    getShareModel(e) {
      this.leaderModal = e;
    },
    // 获取歌曲更多模态框的状态
    getSongMoreStatus(e) {
      this.showSongMore = e;
    },
    // 分享音乐
    toShareMusic() {
      console.log(this.music_id, "---this.music_id");
      console.log(this.songMes, "----this.songMes");
      this.is_weixn();
      // 记录进入app时的url
      if (typeof window.entryUrl === "undefined" || window.entryUrl === "") {
        window.entryUrl = location.href.split("#")[0];
      }
      if (this.isapp == 0) {
        this.wxshare.getWxmessage(
          `分享歌曲` + this.songMes.music_name,
          `歌手:` + this.songMes.singer_name,
          /(Android)/i.test(navigator.userAgent)
            ? location.href.split("#")[0]
            : window.entryUrl,
          this.songMes.background,
          location.href
        );
      } else if (this.isapp == 1) {
        var sendData = {
          type: "1",
          data: {
            title: this.songMes.music_name,
            description: this.songMes.singer_name,
            shareimg: this.songMes.background,
            share_url: location.href
          }
        };
        window.postMessage(JSON.stringify(sendData));
      }
    },
    // 判断是否在微信中打开
    is_weixn() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        // 表示在微信里面
        this.leaderModal = true;
        return true;
      } else {
        return false;
      }
    },
    // 添加喜欢和取消喜欢
    changeLove() {
      const url =
        this.$host1 + `home/addToMyFavouriteMusic?music_id=` + this.music_id;
      var params = {};
      this.$axios
        .post(url, params)
        .then(res => {
          if (res.data.code == 200) {
            this.getSongMes();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 关闭清除播放列表模态框
    closeClearModel() {
      this.isShowClear = false;
    },
    // 显示歌单模态框
    toShowSongSheetModel(type) {
      this.isShowCollect = true;
      if (type == 1) {
        this.isCollectAll = true;
      } else {
        this.isCollectAll = false;
      }
    },
    // 切换是否设置为隐私歌单
    checkStatus() {
      this.ac = !this.ac;
    },
    // 确定新增歌单
    sure() {
      if (this.songname == "") {
        this.AlertWin("请输入歌单名");
        return;
      }
      var pe = 2;
      if (this.ac == true) {
        pe = 1;
      } else {
        pe = 2;
      }
      var url = this.$host1 + `home/addSongSheet`;
      var data = {
        song_sheet_name: this.songname,
        is_personal: pe
      };
      this.$axios
        .post(url, data)
        .then(res => {
          console.log(res);
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              this.addshow = false;
              this.songname = "";
              this.addshow = false;
              this.getUserSongSheetList(); //重新获取下用户歌单列表数据
              setTimeout(() => {
                this.AlertWin("添加成功");
              }, 500);
            } else {
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    // 取消新建歌单
    cancel() {
      this.songname = "";
      this.addshow = false;
    },
    // 选择歌单添加歌曲
    chooseSheet(id) {
      // console.log("选择的是----" + id);
      if (this.isCollectAll) {
        this.playingList.map(item => {
          this.musicIdList.push(item.music_id);
        });
      } else {
        this.musicIdList.push(this.music_id);
      }
      this.addSongSheet(id);
    },
    // 批量添加到歌单
    addSongSheet(id) {
      const url = this.$host1 + `home/collectSomeSongSheet`;
      var params = {
        song_sheet_id: id,
        music_id: this.musicIdList
      };
      this.$axios
        .post(url, params)
        .then(res => {
          // console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.AlertWin("添加成功");
            this.musicIdList = [];
            this.isCollectAll = false;
            this.getUserSongSheetList(); //重新获取一下歌单的数据
          } else {
            this.musicIdList = [];
            this.isCollectAll = false;
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 显示新增歌单模态框
    addSheet() {
      this.addshow = true;
    },
    // 获取用户信息
    getUserInfo() {
      var url = this.$host1 + `home/getPersonalMsg`;
      this.$axios
        .get(url)
        .then(res => {
          //console.log(res)
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              this.userinfo = resData.data;
              this.getUserSongSheetList();
            } else if (resData.code == 0) {
              // this.$router.push('/login');
            } else {
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    // 获取用户的歌单列表
    getUserSongSheetList() {
      let url = this.$host1 + `home/userSongSheetList`;
      this.$axios
        .get(url, {
          params: {
            pageSize: 10000,
            page: 1,
            user_id: this.userinfo.user_id
          }
        })
        .then(res => {
          //console.log(res)
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              this.list = resData.data.list;
            } else {
              this.list = [];
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    // 关闭添加到歌单的模态框
    closeCollectModel() {
      this.isShowCollect = false;
    },
    // 获取歌曲更多模态框的状态
    getSongMoreStatus(e) {
      this.showSongMore = e;
    },
    // 展开歌曲更多模态框
    toShowModel() {
      this.musicObject = this.songMes;
      this.showSongMore = true;
    },
    // 跳转到评论页面
    toComment() {
      this.$router.push({
        path: "/index/comment",
        query: { status: 5, id: this.music_id }
      });
    },
    // 切换到上一首
    previous() {
      console.log("点击了上一首按钮");
      for (var i = 0; i < this.playingList.length; i++) {
        if (this.playingList[i].music_id == this.music_id) {
          if (i == 0 && i != this.playingList.length - 1) {
            // 表示当前歌曲是播放列表的第一首 而且播放列表不止这一首歌曲
            i = this.playingList.length - 1;
            this.music_id = this.playingList[i].music_id;
            this.store.setData(this.music_id, this.music_from);
            this.getSongMes();
            break;
          } else if (i <= this.playingList.length - 1 && i != 0) {
            // 当前播放不是第一首  而且不止一首
            i--;
            this.music_id = this.playingList[i].music_id;
            this.store.setData(this.music_id, this.music_from);
            this.getSongMes();
            break;
          } else if (i == 0 && i == this.playingList.length - 1) {
            // 说明当前播放列表只有这一首歌  当前播放歌曲是最后一首
            this.store.setData(item.music_id, this.music_from);
            this.getSongMes();
            break;
          }
        }
      }
    },
    // 切换到下一首
    next() {
      for (var i = 0; i < this.playingList.length; i++) {
        if (this.playingList[i].music_id == this.music_id) {
          if (i == this.playingList.length - 1 && i != 0) {
            // 表示当前歌曲是播放列表的最后一首 而且这个播放列表不止这一首=歌曲
            // console.log('表示当前歌曲是播放列表的最后一首 而且这个播放列表不止这一首=歌曲');
            i = 0;
            this.music_id = this.playingList[i].music_id;
            this.store.setData(this.music_id, this.music_from);
            this.getSongMes();
            break;
          } else if (i == this.playingList.length - 1 && i == 0) {
            //当前播放列表的最后一首歌  而且播放列表只有一首歌
            // console.log('当前播放列表的最后一首歌  而且播放列表只有一首歌');
            break;
            // index--;
            // this.music_id = this.playingList[index].music_id;
            // this.store.setData(this.music_id, this.music_from);
            // this.getSongMes();
          } else if (i != this.playingList.length - 1) {
            // 表示当前播放列表不止一首歌
            i++;
            this.music_id = this.playingList[i].music_id;
            this.store.setData(this.music_id, this.music_from);
            this.getSongMes();
            break;
          }
        }
      }
    },
    // 清空音乐播放列表
    clearMusicList() {
      this.isShowClear = true;
    },
    // 确定清空播放列表
    sureClear() {
      var musicMes = {};
      window.localStorage.setItem("musicMes", JSON.stringify(musicMes));
      window.localStorage.setItem("songMes", JSON.stringify(musicMes));
      this.store.musicMes = {};
      this.store.songMes = {};
      this.playingListNum = 0;
      this.playingList = [];
      this.store.isPlay = false;
      this.store.playingList = this.playingList;
      window.localStorage.setItem(
        "playingList",
        JSON.stringify(this.playingList)
      );
      this.isShowClear = false;
      this.isShowPlay = false;
      this.store.isFullPlay = false;
      this.reload();
    },
    // 删除播放列表里面的歌曲
    deleteMusic(id) {
      this.musicMes = JSON.parse(window.localStorage.getItem("musicMes"));
      let musicId = this.musicMes.music_id; //表示本地返回的正在播放音乐的id，
      if (musicId == id) {
        console.log("当前歌曲正在播放");
        if (this.playingList.length == 1) {
          // 表示当前播放列表只有这一首歌   而且正在播放  相当于清空播放列表
          this.sureClear();
        } else {
          this.next();
        }
      }
      this.playingList.map((item, index) => {
        if (item.music_id == id) {
          // 如果选择添加到下一首播放的歌曲正在播放   则从数组里移除这一项
          this.playingList.splice(index, 1);
        }
      });
      this.store.playingList = this.playingList;
      window.localStorage.setItem(
        "playingList",
        JSON.stringify(this.playingList)
      );
    },
    // 切换歌曲
    checkMusic(id) {
      this.store.setData(id, this.music_from);
      this.store.isPlay = true;
      this.store.isFullPlay = true;
      this.music_id = this.store.musicMes.music_id;
      this.music_from = this.store.musicMes.music_from;
      this.getSongMes();
      // console.log(this.store.musicMes, "---musicMes--checkMusic");
    },
    // 关闭播放列表模态框
    closePlayModel() {
      // console.log("---close");
      this.isShowPlay = false;
    },
    // 显示播放列表模态框
    showPlayList() {
      // console.log("---0000");
      this.isShowPlay = true;
    },
    changeStatus() {
      this.isPlay = !this.isPlay;
    },
    // 获取音乐是否全屏播放
    checkoutFull(e) {
      this.isFullPlay = e;
    },
    // 获取音乐播放状态
    getPlayStatus(e) {
      this.isPlay = e;
      this.store.isPlay = e;
    },
    // 获取音乐播放列表的展示或隐藏
    getPlayingListStatus(e) {
      this.isShowPlay = true;
    },
    // 返回上一页
    goBack() {
      this.isFullPlay = false;
      this.store.isFullPlay = this.isFullPlay;
    },
    // 获取歌曲信息接口   请求接口部分
    getSongMesData(url) {
      // console.log(url, "---url");
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data.data, "---res.data.data--987");
          if (res.data.code == 200) {
            var resData = res.data;
            this.songMes = resData.data;
            this.coverImgUrl = resData.data.background;
            this.store.songMes = this.songMes;
            window.localStorage.setItem(
              "songMes",
              JSON.stringify(this.store.songMes)
            );
            this.getWords();
            this.$forceUpdate();
            if (this.store.isPlay) {
              setTimeout(() => {
                this.$refs.player.play();
              }, 500);
              this.playControl();
            } else {
              this.$refs.player.pause();
            }
          } else if (res.data.code == 0) {
            // this.AlertWin(res.data.data.message);
          } else {
            // this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取歌曲信息数据
    getSongMes() {
      if (this.music_from == 3) {
        var url =
          this.$host1 +
          `home/musicMainMsg?music_id=` +
          this.music_id +
          "&music_from=" +
          this.music_from +
          "&song_sheet_id=" +
          this.song_sheet_id;
        this.getSongMesData(url);
      } else if (this.music_from == 4) {
        const url =
          this.$host1 +
          `home/musicMainMsg?music_id=` +
          this.music_id +
          `&music_from=` +
          this.music_from +
          `&list_category_name=` +
          this.list_category_name;
        this.getSongMesData(url);
      } else {
        {
          var url =
            this.$host1 +
            `home/musicMainMsg?music_id=` +
            this.music_id +
            "&music_from=" +
            this.music_from;
        }
        this.getSongMesData(url);
      }
      // const url = this.$host1 + `home/musicMainMsg?music_id=`+this.music_id;
    },
    // 查看歌曲是否收藏
    cellect() {
      var data = {
        mix_id: this.music_id,
        type: 4
      };
      var url = this.$host1 + `home/IsCollect`;
      this.$axios
        .post(url, data)
        .then(res => {
          // console.log(res);
          if (res.data.code == 200) {
            var resData = res.data;
            //this.songMes = resData.data
            //this.coverImgUrl= resData.data.background
          } else {
            // this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 切换至歌词页面
    lookWords() {
      this.isShowImg = false;
      // this.getWords();
    },
    // 切换至歌手图片页面
    lookSingerImg() {
      this.isShowImg = true;
    },
    // 播放音乐
    play() {
      this.isPlay = !this.isPlay;
      this.store.isPlay = this.isPlay;
      if (this.isPlay) {
        this.$refs.player.play();
        this.playControl();
      } else {
        this.$refs.player.pause();
      }
    },
    playControl() {
      var audio = document.getElementById("music");
      if (this.isPlay) {
        this.timer = setInterval(() => {
          if (audio == null) {
            audio = document.getElementById("music");
          }
          var allTime = parseInt(audio.duration);
          var allM = parseInt((allTime / 60) % 60);
          var allS = parseInt(allTime % 60);
          if (allM < 10 && allS < 10) {
            this.allTime = "0" + allM + ":" + "0" + allS;
          } else if (myM < 10) {
            this.allTime = "0" + allM + ":" + allS;
          } else {
            this.allTime = allM + ":" + allS;
          }
          this.audioRange =
            parseInt((audio.currentTime / audio.duration) * 100) + "%";
          this.currentTime = parseInt(audio.currentTime);
          this.allTimes = parseInt(audio.duration);
          this.currentSrc = audio.currentSrc;
          if (this.currentLyric) {
            this.currentLyric.seek(audio.currentTime * 1000);
          }
          if (audio.ended) {
            if (this.ind == 3) {
              // 表示当前是设置的单曲循环模式
              this.musicPlay();
            } else if (this.ind == 2) {
              // 表示当前设置的是随机播放模式
              var randomNum = Math.ceil(
                Math.random() * this.playingList.length
              );
              this.music_id = this.playingList[randomNum].music_id;
              this.previous();
            } else if (this.ind == 1) {
              // 表示当前设置的是列表循环模式
              this.next();
            }
            // this.currentLyric.stop();
            // this.isPlay = false; //如果音频已经播放完毕  就把播放按钮显示出来
          }
          this.playTime = parseInt(audio.currentTime) * 1000;
          var myM = parseInt((this.playTime / 1000 / 60) % 60);
          var myS = parseInt((this.playTime / 1000) % 60);
          if (myM < 10 && myS < 10) {
            this.playTime = "0" + myM + ":" + "0" + myS;
          } else if (myM < 10) {
            this.playTime = "0" + myM + ":" + myS;
          } else {
            this.playTime = myM + ":" + myS;
          }
        }, 1000);
      }
    },
    musicPlay() {
      var audio = document.getElementById("music");
      audio.play();
    },
    // 获取歌词
    getWords() {
      var data = {
        music_id: this.music_id
      };
      const url = this.$host1 + `home/changeMusicLyrics`;
      this.$axios
        .post(url, data)
        .then(res => {
          //console.log(res,'---res.data--');
          if (res.status == 200) {
            var resData = res.data;
            //var obj={}
            this.currentLyric = new Lyric(resData, this.handleLyric);
            if (this.isPlay) {
              // 如果此时正在播放则歌词也开始播放
              this.currentLyric.play();
            }
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    handleLyric({ lineNum, txt }) {
      this.currentLineNum = lineNum;
      if (this.isShowImg == false) {
        if (lineNum > 5) {
          let lineEl = this.$refs.lyricLine[lineNum - 5];

          this.$refs.lyriclist.scrollToElement(lineEl, 1000);
        } else {
          this.$refs.lyriclist.scrollTo(0, 0, 1000);
        }
      }
      this.playingLyric = txt;
    },
    getpercent(percent) {
      var now = this.allTimes * parseInt(percent);
      var myM = parseInt((now / 100 / 60) % 60);
      var myS = parseInt((now / 100) % 60);
      if (myM < 10 && myS < 10) {
        this.playTime = "0" + myM + ":" + "0" + myS;
      } else if (myM < 10) {
        this.playTime = "0" + myM + ":" + myS;
      } else {
        this.playTime = myM + ":" + myS;
      }
      var audio = document.getElementById("music");
      this.currentTime = now / 100;
      audio.currentTime = parseInt(this.currentTime);
      // 点击或滑动 歌曲进度条 歌词滚动到对应的位置
      if (this.currentLyric) {
      }
    },
    // 播放模式切换
    tochecktype() {
      this.ind++;
      if (this.ind > 3) {
        this.ind = 1;
      }
      if (this.ind == 3) {
        this.isloop = true;
      } else {
        this.isloop = false;
      }
      switch (this.ind) {
        case 1:
          this.AlertWin("列表循环");
          break;
        case 2:
          this.AlertWin("随机播放");
          break;
        case 3:
          this.AlertWin("单曲循环");
          break;
      }
    }
  },

  mounted() {
    const that = this;
    window.onclick = () => {
      return (() => {
        that.checktype = false;
      })();
    };
    var test2 = setInterval(() => {
      if ((this.count / 180) % 180 == 0) {
        this.count += 180;
      }
    }, 1000);
    this.isPlay = this.store.isPlay;
    this.played = this.store.isPlay;
    this.isFullPlay = this.store.isFullPlay;
    if (this.isPlay) {
      var audio = document.getElementById("music");
      setTimeout(() => {
        audio.play();
      }, 500);
      this.playControl();
      this.store.isPlay = true;
    }
  },
  updated() {},
  beforeDestroy() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.player {
  @keyframes rotate {
    from {
      transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform-origin: center;
    }
    to {
      transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      transform-origin: center;
    }
  }
  .square {
    animation: rotate infinite linear 10s;
    -webkit-animation: rotate infinite linear 10s;
    -moz-animation: rotate infinite linear 10s;
  }
  .big-player {
    .container {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
      .background {
        width: 150%;
        height: 150%;
        z-index: -1;
        margin-left: -1rem;
        margin-top: -1rem;
        position: absolute;
        filter: blur(0.7rem);
      }
      .header-song {
        padding: 0 0.24rem;
        box-sizing: border-box;
        height: 1.3rem;
        width: 100%;
        //background-color: greenyellow;
        .back {
          width: 0.46rem;
          height: 0.46rem;
          img {
            width: 0.15rem;
            height: 0.26rem;
          }
          // img{
          //   transform: rotate(-180deg);
          // }
        }
        img {
          width: 0.46rem;
          height: 0.46rem;
        }
      }
      // 歌手图片
      .main {
        height: calc(100% - 4rem);
        width: 100%;
        position: relative;
        padding-bottom: 2.2rem;
        box-sizing: border-box;
        margin-top: 0.5rem;
        //background-color: pink;
        .song-pic {
          //background-color: greenyellow;
          position: relative;
          //padding-top: 0.5rem;
          width: 4.9rem;
          height: 4.9rem;
          box-sizing: border-box;
          margin: 0.2rem auto 0;
          //border-radius: 50%;
          // background: url('../../assets/index/progress.png') no-repeat;
          background-size: 5.48rem;
          .light {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #7408b4;
            left: 0;
            top: 0;
          }
          .box {
            width: 5.37rem;
            height: 5.37rem;
            position: absolute;
            background-color: #fefdfe;
            top: 0.05rem;
            left: 0.06rem;
            border-radius: 50%;
          }
          img {
            display: block;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            // position: absolute;
            // left: 0;
            //top: 0.15rem;
            width: 100%;
          }
        }
      }

      // 歌曲名称歌手名称
      .song-mes,
      .song-mes-tit {
        width: 100%;
        //background-color: greenyellow;
        margin-bottom: 0.2rem;
        .title {
          margin-top: 0.3rem;
          text-align: center;
          //font-weight:bold;
          //color:rgba(68,68,68,1);
          //font-size: 0.30rem;
          margin-bottom: 0.1rem;
        }
        .txt {
          opacity: 0.5;
          //font-size: 0.28rem;
          text-align: center;
          font-weight: 500;
          //color:rgba(153,153,153,1);
        }
      }
      .song-mes-tit {
        margin-bottom: 0;
      }
      // 图标内容
      .icons {
        //background-color: #7408B4;
        width: 100%;
        height: 0.48rem;
        position: absolute;
        bottom: 2.5rem;
        padding: 0 1.23rem 0 1.18rem;
        box-sizing: border-box;
        img,
        div {
          position: relative;
          width: 0.48rem;
        }
        div .vip {
          position: absolute;
          display: inline-block;
          width: 0.32rem;
          height: 0.32rem;
          margin-left: 0.32rem;
          top: 0.3rem;
        }
        img:nth-child(4) {
          width: 0.1rem;
        }
      }
      .bottom {
        width: 100%;
        height: 2.2rem;
        // line-height: 2.2rem;
        position: absolute;
        //padding: 0 0.38rem 0 0.44rem;

        //box-sizing: border-box;
        left: 0;
        bottom: 0;
        .progress {
          padding: 0 0.3rem;
          box-sizing: border-box;
          width: 100%;
          height: 0.5rem;
          //background-color: #E9D7F3;
          .progress-bar-wrapper {
            width: 5rem;
            //background-color: greenyellow;
            height: 100%;
            .aplayer {
              .aplayer-body {
                .aplayer-pic {
                  display: none !important;
                }
              }
            }
          }
          .left,
          .right {
            color: rgba(255, 255, 255, 0.5);
          }
        }
        .playbtn {
          padding: 0 0.4rem;
          box-sizing: border-box;
          height: 1.5rem;
          //background:rgba(250,250,250,1);
          img {
            width: 0.48rem;
          }
          img:nth-child(3) {
            width: 1.24rem;
            border-radius: 50%;
            height: 1.24rem;
          }
        }
      }
      // 歌词详情样式设置
      .middle {
        //background-color: blue;
        position: fixed;
        width: 100%;
        top: 1.5rem;
        bottom: 2.5rem;
        white-space: nowrap;
        font-size: 0.3rem;
        .middle-l {
          display: inline-block;
          vertical-align: top;
          position: relative;
          width: 100%;
          height: 0;
          padding-top: 80%;
          .cd-wrapper {
            position: absolute;
            left: 10%;
            top: 0;
            width: 80%;
            height: 100%;
            .cd {
              width: 100%;
              height: 100%;
              box-sizing: border-box;
              border: 0.1rem solid rgba(255, 255, 255, 0.1);
              border-radius: 50%;
            }
          }
          .playing-lyric-wrapper {
            width: 80%;
            margin: 0.3rem auto 0 auto;
            overflow: hidden;
            text-align: center;
            .playing-lyric {
              height: 0.2rem;
              line-height: 0.2rem;
              font-size: 0.24rem;
              color: greenyellow;
            }
          }
        }
        .middle-r {
          //background-color: red;
          //display: inline-block;
          vertical-align: top;
          width: 100%;
          height: 100%;
          overflow: hidden;
          .lyric-wrapper {
            width: 80%;
            margin: 0 auto;
            overflow: hidden;
            text-align: center;
            .text {
              opacity: 0.5;
              line-height: 0.7rem;
              color: #fff;
              font-size: 0.32rem;
            }
            .current {
              color: #fff;
              opacity: 1;
            }
          }
        }
      }
      .playtype {
        width: 2rem;
        height: 2.1rem;
        position: fixed;
        z-index: 999;
        bottom: 1.2rem;
        left: 0.24rem;
        overflow: hidden;
        border-radius: 0.1rem;
        background-color: rgba(73, 53, 65, 0.9);
        .space-between {
          width: 100%;
          height: 33.3%;
          padding: 0 0.3rem;
          box-sizing: border-box;
          img {
            width: 0.32rem;
            height: 0.32rem;
          }
        }
        .current {
          background-color: #e9d7f3;
        }
      }
    }
  }
  .playList {
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 100000;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    .playList-main {
      width: 100%;
      height: 8rem;
      position: absolute;
      left: 0;
      bottom: 0;
      background-color: rgba(245, 245, 245, 1);
      border-radius: 0.24rem 0.24rem 0 0;
      padding: 0.12rem 0 0;
      box-sizing: border-box;
      .top {
        width: 100%;
        height: 0.8rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.23rem;
        box-sizing: border-box;
        background-color: rgba(245, 245, 245, 1);
        border-bottom: 0.01rem solid #eee;
        position: absolute;
        left: 0;
        top: 0;
        .left {
          display: flex;
          flex-direction: row;
          align-items: center;
          .img {
            width: 0.4rem;
            height: 0.4rem;
            margin-top: 0.01rem;
            margin-right: 0.15rem;
            img {
              width: 100%;
            }
          }
          .txt {
            height: 0.4rem;
            margin-right: 0.15rem;
          }
          .num {
            height: 0.4rem;
          }
        }
        .right {
          display: flex;
          flex-direction: row;
          .add {
            width: 0.4rem;
            height: 0.4rem;
            margin-right: 0.14rem;
            img {
              width: 100%;
            }
          }
          .del {
            width: 0.3rem;
            height: 0.3rem;
            margin-left: 0.16rem;
            img {
              width: 100%;
            }
          }
        }
      }
      .songList {
        width: 100%;
        height: 100%;
        margin-top: 0.75rem;
        // background-color: pink;
        .list {
          width: 100%;
          height: 100%;
          overflow-x: hidden;
          overflow-y: scroll;
          -webkit-overflow-scrolling: touch;
          .item {
            width: 100%;
            height: 1rem;
            padding: 0 0.23rem;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            .left {
              display: flex;
              flex-direction: row;
              .songName {
                font-weight: 500;
                color: rgba(68, 68, 68, 1);
                line-height: 0.36rem;
              }
              .singerName {
                font-weight: 500;
                color: rgba(153, 153, 153, 1);
                line-height: 0.36rem;
              }
            }
            .isPlaying {
              color: red !important;
            }
            .right {
              img {
                width: 0.2rem;
                height: 0.2rem;
              }
            }
          }
        }
      }
    }
  }
  .list::-webkit-scrollbar {
    display: none;
  }
  /deep/ .v-modal {
    z-index: 999999 !important;
  }
  /deep/ .mint-msgbox-wrapper {
    z-index: 999999 !important;
  }
  // 收藏到歌单模态框
  .collectModel {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000;
    background-color: rgba(0, 0, 0, 0.5);
    .add-box {
      position: absolute;
      width: 90%;
      // height: 5rem;
      background-color: #fff;
      left: 50%;
      top: 25%;
      border-radius: 0.14rem;
      transform: translate(-50%);
      padding: 0.24rem;
      box-sizing: border-box;
      .add {
        display: flex;
        align-items: center;
        margin-bottom: 0.24rem;
        .img {
          position: relative;
          width: 1rem;
          height: 1rem;
          margin-right: 0.25rem;
          background-color: rgba(248, 248, 248, 1);
          img {
            width: 0.3rem;
            height: 0.3rem;
            position: absolute;
            left: 50%;
            top: 35%;
            transform: translate(-50%);
          }
          span {
          }
        }
      }

      .list {
        width: 100%;
        height: auto;
        .list-item {
          height: 1rem;
          margin-bottom: 0.12rem;
          padding-bottom: 0.12rem;
          box-sizing: border-box;
          .center-col {
            width: 100%;
            height: 100%;
            .left {
              width: auto;
              min-width: 1rem;
              max-width: 1.5rem;
              .yuan {
                width: 0.36rem;
                height: 0.36rem;
                margin-right: 0.2rem;
                p {
                  width: 0.2rem;
                  height: 0.03rem;
                }
              }
              img {
                width: 0.88rem;
                height: 0.88rem;
              }
            }
            .right {
              margin-left: 0.2rem;
              height: 0.88rem;
            }
          }
        }
      }
    }
  }

  //新建歌单模态框
  .addmusic-list {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10000001;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    .contents {
      width: 100%;
      height: 5.3rem;
      position: absolute;
      bottom: 0;
      left: 0;
      border-radius: 0.15rem 0.15rem 0 0;
      .top {
        height: 1rem;
        border-bottom: 0.01rem solid #e9e9e9;
      }
      .setmusic {
        padding: 0.2rem 0.24rem;
        input {
          width: 100%;
          height: 0.6rem;
          margin-top: 0.5rem;
          border: 0.015rem solid #999;
          border-radius: 0.12rem;
          text-indent: 0.2rem;
          //background-color: greenyellow;
        }
        .center-col {
          width: 100%;
          height: 0.6rem;
          margin-top: 0.2rem;
          //background-color: greenyellow;
          .yuan {
            width: 0.4rem;
            height: 0.4rem;
            margin-right: 0.2rem;
            border: 0.01rem solid #e9e9e9;
            p {
              width: 0.3rem;
              height: 0.3rem;
              border-radius: 50%;
              background-color: #fff;
            }
          }
          .active {
            border: 0.01rem solid #f44349;
            p {
              background-color: #f44349;
            }
          }
        }
      }
    }
  }
  // 清除播放列表模态框
  .clearModel {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1999999;
    background-color: rgba(0, 0, 0, 0.5);
    .add-box {
      position: absolute;
      width: 5.2rem;
      // height: 2.2rem;
      background-color: #fff;
      left: 50%;
      top: 25%;
      border-radius: 0.14rem;
      transform: translate(-50%);
      .title {
        width: 100%;
        height: 1.01rem;
        padding: 0.24rem;
        box-sizing: border-box;
        font-weight: 500;
        text-align: center;
        border-bottom: 0.01rem solid #dddddd;
        color: rgba(68, 68, 68, 1);
      }
      .btn {
        display: flex;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        .left,
        .right {
          width: 50%;
          height: 100%;
          font-weight: 500;
          color: rgba(68, 68, 68, 1);
        }
        .left {
          border-right: 0.01rem solid #dddddd;
        }
      }
    }
  }
}
</style>
